<template>
	<view>

		<!-- 商品列表 -->
	<view class="goods-list">
        <view 
		class="cart-item"
		v-for="item in cartList"
        :key="item.goods_id">
			<!-- 单选框 -->
			<radio
			color="#EB4450"
			:checked="item.goods_select"
			@click="changeSelect(item.goods_id)"
			/>
			<!-- 步进器 -->
			<view class="cart-count">
				<u-number-box v-model="item.goods_count" :name="item.goods_id" @change="valChange"></u-number-box>
			</view>
		<navigator 
        class="goods-item"
		
        :url="`/pages/goods_detail/goods_detail?goods_id=${item.goods_id}`"
        open-type="navigate"
		hover-class="none"
         >
          <image
          class="goods-image"
            :src="item.goods_small_logo || defaultImage"
           mode="aspectFit"
          />

          <view class="goods-info">
            <view class="goods-name">{{item.goods_name}}</view>
            <view class="goods-price">{{item.goods_price}}</view>
          </view>
        </navigator>
		</view>
    </view>

		<!-- 底部操作栏 -->
	<view class="bottom-bar">
		<!-- 全选 -->
		<view class="select">
			<radio

			class="select-radio"
				:checked="isAllSelect"
				color="#EB4450"
				@click="changeSelectAll"
			/>
			<text class="select-text">全选</text>
		</view>
		
		<!-- 合计 -->
		<view class="total">
			<text class="total-name">合计:</text>
			<text class="total-price">¥ {{selectCartListPrice}}</text>
		</view>

		<!-- 结算 -->
		<view class="account" @click="goToPay">去结算({{seleCartListCount}})</view>

	</view>
	</view>
	

	
</template>

<script>
import { mapGetters } from 'vuex'

 
	export default {
		data() {
			return {
				keyword:''
			}
		},
		methods:{
			changeSelect(goods_id){
				const newList = [...this.cartList]
				const index = newList.findIndex(v=>v.goods_id === goods_id)
				if(index !== -1){
					newList[index].goods_select = !newList[index].goods_select
				}
				this.$store.commit('setCartList',newList)
			},
			valChange(val){
				console.log('val----',val)
				const newList = [...this.cartList]
				const index = newList.findIndex(v=>v.goods_id === val.name)
				if(index !== -1){
					newList[index].goods_count = val.value
				}
				this.$store.commit('setCartList',newList)
			},
			changeSelectAll(){
				const tempSelectAll = !this.isAllSelect
				const newList = [...this.$store.state.cartList]
				newList.forEach(item=> item.goods_select = tempSelectAll)
				
				this.$store.commit('setCartList',newList)
			},
			goToPay(){
				if(this.seleCartListCount === 0){
					return uni.showToast({
						title: '请选择结算商品~',
						icon: 'none',
						mask: true
					})
				}
				// 去支付页面
				uni.navigateTo({ url: '/pages/pay/pay' })

			}
			
		},
		computed:{
			cartList(){
				return this.$store.state.cartList
			},
			// isAllSelect(){
			// 	return this.$store.getters.isAllSelect
			// },
			// selectCartListPrice(){
			// 	return this.$store.getters.selectCartListPrice
			// },
			// seleCartListCount(){
			// 	return this.$store.getters.seleCartListCount
			// }
			...mapGetters(['isAllSelect','selectCartListPrice','seleCartListCount'])
		}
		
	}
</script>

<style lang="scss">
.cart-item{
	display: flex;
	position: relative;
	align-items: center;
	padding-left: 20rpx;
	border-bottom: 1px solid #ddd;
	.goods-item{
		border-bottom: none;
	}
}


.cart-count{
	position: absolute;
	bottom: 0;
	right: 0 ;
	padding: 20rpx;
	width: 250rpx;
	background-color: pink;
	
}

.bottom-bar {
	height: 100rpx;
	position: fixed;
	left: 0;
	right: 0;
	// --window-bottom:自带平台兼容，小程序是0px，h5端是tabbar高度
	bottom: var(--window-bottom);

	
	border-top: 1px solid #ddd;
	background-color: #fff;
	display: flex;
	align-items: center;
	padding: 0 20rpx;
  .select {
  .select-radio {
		.select-text {
			font-size: 22rpx;
			margin: 0 20rpx;
			color: #999;
		}
	  }
	}
  
	.total {
		flex: 1;
		display: flex;
		align-items: center;
		margin-left: 20rpx;
	
	 .total-name {
		font-size: 24rpx;
		margin-right: 10rpx;
	  }
  
     .total-price {
		color: #ea4350;
	  }
	}
  
   .account {
	background-color: #ea4350;
	color: #fff;
	font-size: 22rpx;
	width: 150rpx;
	height: 52rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 26rpx;
	}
  }
</style>
